<template>
  <div class="temp" v-if="showModal">
    <Icon type="md-close" class="closeIcon" @click="closeTemp" size="50" color="#fff" />
    <div class="tempBtn" v-if="!btnFlag">
      <Button @click="closeTemp">取消</Button>
      <Button type="primary" style="margin-left: 10px" @click="upShelfOk">确定</Button>
    </div>
    <div class="swiperBox">
      <slot name="upShelf"></slot>
      <canvas1 v-if="showModal && tempNum == 1" :tuUrl1="tuUrl1" :shortDetails="shortDetails1"></canvas1>
      <canvas2 v-if="showModal && tempNum == 2" :tuUrl1="tuUrl1" :shortDetails="shortDetails1"></canvas2>
      <canvas3 v-if="showModal && tempNum == 3" :tuUrl1="tuUrl1" :shortDetails="shortDetails1"></canvas3>
    </div>
  </div>
</template>
<script>
  import canvas1 from '@/components/template/canvas1.vue'
  import canvas2 from '@/components/template/canvas2.vue'
  import canvas3 from '@/components/template/canvas3.vue'

  export default {
    // props:{},
    props: ['tempNum', 'tuUrl', 'upShelfOrPreview', 'shortDetails', 'btnFlag'],
    components: {
      // temp1,
      // temp2,
      canvas1,
      canvas2,
      canvas3
    },
    data() {
      return {
        showModal: false,
        tuUrl1: '',
        shortDetails1: ''
      }
    },
    computed: {},
    methods: {
      show() {
        this.showModal = true
      },
      closeTemp() {
        this.showModal = false
      },
      upShelfOk() {
        this.$emit('upShelfOk', this.upShelfOrPreview)
      }
    },

    created() {
      this.shortDetails1 = this.shortDetails
      console.log(this.shortDetails, this.btnFlag, '4444444444444444444444')
    },
    mounted() {},
    watch: {
      tuUrl(val) {
        console.log(val, 'aaaaaaaaaaaava')
        this.tuUrl1 = val
      },
      shortDetails(val) {
        this.shortDetails1 = val
        console.log(val, '5555555555555')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .temp {
    height: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999999;
    overflow-y: hidden;
    // padding-bottom: 50px;

    .closeIcon {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      z-index: 9999;
    }

    .swiperBox {
      width: 70%;
      min-width: 1215px;
      margin: 20px auto 0;
      overflow: auto;
      max-height: 100%;
      padding-bottom: 70px;
    }

    .swiperBox::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .temp1 {
      // height: 400px;
      // background: #fff;
    }
  }

  .tempBtn {
    text-align: center;
    margin-top: 10px;
  }
</style>
